<template>
  <div class="selectCity">
    <van-overlay class-name="overlay" :show="show">
      <div class="overlayDiv">
        <!-- 固定 -->
        <div class="fixed">
          <div class="header">
            <van-icon name="cross" size="24px" @click="$router.go(-1)" />
            <div class="nowCity">当前城市 - <span></span></div>
          </div>
          <div class="search">
            <van-search
              v-model="searchValue"
              placeholder="请输入城市名或拼音"
              background="#dcdee0" />
          </div>
        </div>
        <!-- 搜索内容区域 -->
        <div class="content">
          <div class="resultSearch">
            <div>
              <p>GPS定位你所在的城市</p>
            <div class="GPSfail">&nbsp;定位失败&nbsp;</div>
            <div></div>
            </div>
            <div class="popularCities">
              <p>热门城市</p>
              <div class="GPSfail">&nbsp;广州&nbsp;</div>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: 'SelectCity',
  data() {
    return {
      show: false,
      searchValue: ''
    }
  },
  mounted() {
    this.show = true
  },
  unmounted() {
    this.show = false
  }
}
</script>

<style lang="less" scoped>
.overlay {
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999;
  .fixed {
    width: 100vw;
    position: fixed;
    top: 0;
    .header {
      height: 44px;
      display: flex;
      align-items: center;
      text-align: center;
      padding: 0 10px;
      .nowCity {
        flex: 5;
      }
    }
    .search {
      height: 49px;
      /deep/ .van-search__content {
        border-radius: 9px;
        height: 30px;
      }
    }
  }
  .content{
    padding-top: 93px;
    font-size: 14px;
    .resultSearch{
      padding: 10px;
      div:first-child p{
        color: #797d82;
        margin-bottom: 10px;
      }
      .GPSfail{
        background: #e6e6e6;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        border-radius: 5px;
        margin: 5px;
      }
      .popularCities{
        margin-top: 10px;
        p{
          color: #797d82;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
